<template>
    <view class="container text-df solid-top">
        <u-navbar :is-back="false" title="微聊" :background="background" :border-bottom="true"
            title-color="#000" title-size="30" >
            <view slot="right" style="padding-right: 20rpx;font-size: 28rpx; color: #000;" @click="doReport">
                举报
            </view>
        </u-navbar>
        <!-- <view class="search" v-if="list.length > 0">
            <u-search placeholder="搜索" v-model="keywords" height="70" shape="round" color="8796ab" bg-color="#f3f7fb" 
                input-align="left" :show-action="false" @search="toSearch"></u-search>
        </view> -->
        <u-swipe-action :show="item.show" :index="index" 
            v-for="(item, index) in list" :key="index" 
            @click="delChat(index, item)" @open="open"
            :options="options"
        >
            <view class="padding-lr flex align-center min-width-0" @click.stop="toPage(item)">
                <image class="user-img margin-right" :src="item.image || '../../static/icon/avatar.png'"></image>
                <view class="padding-tb border1 flex-sub min-width-0">
                    <view class="flex align-center justify-between">
                        <view class="text-xl text-bold u-flex-1">{{item.user_name}}</view>
                        <view class="text-sm text-gray">{{item.create_time}}</view>
                    </view>
                    <view class="u-flex u-row-right u-col-center u-padding-top-15">
                        <view class="pinglun text-cut text-gray" v-if="item.content">{{item.content}}</view>
                        <view v-if="item.unread > 0" class="spot"></view>
                    </view>
                </view>
            </view>
        </u-swipe-action>
        
        <view style="height: 94rpx;padding-top: 30rpx;">
            <u-loadmore :status="status" v-if="status != 'loadmore'" />
        </view>
        
        <!-- 底部导航 -->
        <u-tabbar v-model="current" :list="tab_list" active-color="#29b0ed" :border-top="false" height="120" @change="tabbarChange"></u-tabbar>
    </view>
</template>

<script>
export default {
    data() {
        return {
            statusBar: 0,
            background: { backgroundColor: 'rgba(255,255,255,0)' },
            current: 0, //底部导航索引
            tab_list: [
                {
                    iconPath: "/static/icon/tab_01.png",
                    selectedIconPath: "/static/icon/tab_01.png",
                    text: '',
                    pagePath: "/pages/tabbar/index",
                    customIcon: false
                },{
                    iconPath: "/static/icon/tab_03.png",
                    selectedIconPath: "/static/icon/tab_02.png",
                    text: '客户',
                    customIcon: false,
                    pagePath: "/pages/tabbar/kehu"
                },{
                    iconPath: "/static/icon/tab_05.png",
                    selectedIconPath: "/static/icon/tab_04.png",
                    text: '消息',
                    customIcon: false,
                    pagePath: "/pages/tabbar/news"
                },{
                    iconPath: "/static/icon/tab_07.png",
                    selectedIconPath: "/static/icon/tab_06.png",
                    text: '微聊',
                    customIcon: false,
                    pagePath: "/pages/tabbar/wechat"
                },{
                    iconPath: "/static/icon/tab_09.png",
                    selectedIconPath: "/static/icon/tab_08.png",
                    text: '我的',
                    customIcon: false,
                    pagePath: "/pages/tabbar/mine"
                }
            ],
            keywords: '',
            status: 'loadmore', //是否显示没有更多了
            page: 1,
            list: [],
            options: [{
                text: '删除',
                style: {
                    backgroundColor: '#dd524d'
                }
            }],
            
        };
    },
    onLoad() {
        let _this = this;
        //状态栏高度
        uni.getSystemInfo({
        	success: function(res) {
        		_this.statusBar = res.statusBarHeight;
        	}
        });
        if (this.$getSync('userToken')) {
            this.getList();
        }
        // 详情页返回
        uni.$on('BACK_WECHAT', () => {
            this.page = 1;
            this.list = [];
            this.status = 'loadmore';
            this.getList();
        })
        
        // 接收推送
        uni.$on('WECHAT', () => {
            this.page = 1;
            this.list = [];
            this.status = 'loadmore';
            this.getList();
        })
        
    },
    onShow() {
        if (!this.$getSync('userToken')) {
            uni.showModal({
            	title: '温馨提示',
            	content: '去登录？',
            	success: (res) => {
            		if (res.confirm) {
            			this.$gTo('/pages/login/login')
            		} else if (res.cancel) {
            			this.$sTo('/pages/tabbar/index')
            		}
            	}
            });
        } 
    },
    onPullDownRefresh() {
        var _this = this
        _this.status = 'loadmore';
        _this.page = 1;
        _this.list = [];
        _this.getList();
        uni.stopPullDownRefresh();
    },
    onReachBottom() {
    	if(this.page == 1){return}
    	this.getList()
    },
    methods: {
        // 举报
        doReport() {
            if (!this.$getSync('userToken')) {
                this.$gTo('/pages/login/login')
            } else {
                this.$gTo('/mine/pages/other/feedback')
            }
        },
        
        // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
        open(index) {
            // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
            // 原本为'false'，再次设置为'false'会无效
            this.list[index].show = true;
            this.list.map((val, idx) => {
                if(index != idx) this.list[idx].show = false;
            })
        },
        
        // 删除聊天
        delChat(index, item) {
            console.log(index, item)
            console.log({
                user_token: this.$getSync('userToken'),
                receive_id: item.receive_id,
            })
            // return
            this.$ajax('delete_micro_chat', {
            	user_token: this.$getSync('userToken'),
            	receive_id: item.receive_id,
            }).then(ret => {
            	if (ret.success == 1000) {
                    this.list.splice(index, 1);
            		this.$toast('删除成功');
            	} else {
            		this.$toast(ret.msg);
            	}
            });
        },
        
        toPage(item) {
            if (!this.$getSync('userToken')) {
                this.$gTo('/pages/login/login')
            } else {
                this.$gTo('/pages/chat/chat-details?data=' + JSON.stringify(item) + '&type=3')
            }
        },
        // 搜索
        toSearch() {
            this.page = 1;
            this.list = [];
            this.status = 'loadmore';
            this.getList();
        },
        
        getList() {
        	if (this.status == 'nomore') return;
        	this.status = 'loading';
        	this.$ajax('micro_chat_list', {
        		user_token: this.$getSync('userToken'),
        		page: this.page,
        		limit: 10,
        	}).then(ret => {
        		if (ret.success == 1000) {
        			if (ret.detail && ret.detail.micro_chat && ret.detail.micro_chat.length > 0) {
        				this.list = this.list.concat(ret.detail.micro_chat);
        				this.page++;
        				this.status = 'loadmore'
        			} else {
        				this.status = 'nomore'
        			}
                    this.list.forEach(cur => {
                        this.$set(cur, 'show', false)
                    })
        		} else {
        			this.$toast(ret.msg);
        		}
        	});
        },
        
        
        //切换底部导航
        tabbarChange(e) {
        	this.current = e;
        },
        
        onPageScroll: function(e) {
        	//nvue暂不支持滚动监听，可用bindingx代替
        	// console.log("滚动距离为：" + e.scrollTop);
        	let a = e.scrollTop * 0.05;
        	if (a > 1) {
        		a = 1;
        	}
        	if (e.scrollTop == 0) {
        		this.background.backgroundColor = 'rgba(49,153,245,0)';
        	} else {
        		this.background.backgroundColor = 'rgba(49,153,245,' + a + ')';
        	}
        },
    }
};
</script>

<style>
    .u-tabbar__content__item .u-icon__img {
    	width: 50rpx !important;
    	height: 50rpx !important;
    }
    .u-tabbar__content>.u-tabbar__content__item:first-child .u-icon__img{
        width: 100rpx !important;
        height: 100rpx !important;
        margin-top: -20rpx;
    }
</style>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
    
    .pinglun{
        width: 76vw;
    }
    .spot{
        width: 14rpx;
        height: 14rpx;
        border-radius: 50%;
        background-color: #ff5b5c;
    }
    .border1 {
        border-bottom: 1rpx solid #eaebf0;
    }
    .user-img{
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
    }
    
    .search {
        width: 100vw;
        padding: 20rpx;
    }
    
</style>
